<template>
    <view class="content columnbox wdh-100">
        <u-sticky bgColor="#fff">
            <view style="background: #fff;width: 100vw;" class="">
                <u-tabs class="wdh-100" @change="changeTab" lineColor='#00b6b2' :current='currenttab'
                    :list="tablist"></u-tabs>
            </view>
        </u-sticky>
        <view v-for="(item,index) in infolist" :key='index' class="one-advice columnbox">
            <view class="rowbox wdh-100 jus">
                <view class="q-title columnbox als">
                    <view>{{item.name}}</view>
                    <view class="q-line"></view>
                </view>
            </view>
            <view class="info-content">{{item.title}}</view>
            <view class="rowbox wdh-100 manage-box">
                <view class="choose-btn rowbox" @click="chooseInfo(item)">选择</view>
                <view @click="deletInfo(item)" v-if="currenttab==1" class="rowbox delet-btn">删除</view>
            </view>
        </view>
        <template v-if="currenttab==1">
            <view class="wdh-100" style="height: 170rpx;"></view>
            <view class="bottom-box wdh-100 rowbox ">
                <view class="rowbox send-btn wdh-100" @click="addTemplate">
                    新建自定义模版
                </view>
            </view>
        </template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tablist: [{
                    name: '默认模版',
                }, {
                    name: '自定义模版',
                }],
                currenttab: 1,
                refreshflag: false,
                infolist: []
            };
        },
        onLoad() {
            this.getInfo()
        },
        onShow() {
            if (this.refreshflag) {
                this.getInfo()
            }
        },
        methods: {
            chooseInfo(v) {
                let pages = getCurrentPages(); //获取所有页面栈实例列表
                let nowPage = pages[pages.length - 1]; //当前页页面实例
                let prevPage = pages[pages.length - 2]; //上一页页面实例
                prevPage.$vm.adviceInfo = v.title
                uni.navigateBack()
            },
            deletInfo(v) {
                uni.showModal({
                    title: '是否确认删除？',
                    success: (res) => {
                        if (res.confirm) {
                            this.$req.post('/doctor/chuliyijiandel', {
                                id: v.id
                            }).then(res => {
                                this.getInfo()
                                uni.showToast({
                                    title: '删除成功',
                                })
                            })
                        }
                    }
                })
            },
            changeTab(e) {
                this.currenttab = e.index
                this.getInfo()
            },
            getInfo() {
                this.$req.post('/doctor/chuliyijian', {
                    doctorid: this.currenttab == 0 ? 0 : uni.getStorageSync('uid')
                }).then(res => {
                    this.infolist = res.data.data
                })
            },
            addTemplate() {
                uni.navigateTo({
                    url: '/pages/patient/adviceAdd'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        background: #F5F8FB;
        min-height: 100vh;
        justify-content: flex-start;
        font-family: PingFang SC;
    }

    .one-advice {
        width: 710rpx;
        margin-top: 20rpx;
        background: #fff;
        border-radius: 20rpx;
        padding: 20rpx 20rpx;
    }

    .q-title {
        font-weight: bold;
        font-size: 28rpx;
        color: #202020;
        font-family: PingFang SC;
        line-height: 40rpx;
    }

    .q-title>view:nth-child(1) {
        position: relative;
        z-index: 4;
    }

    .q-line {
        background: linear-gradient(to right, #00b6b2, rgba(#00b6b2, 0));
        width: 70rpx;
        height: 15rpx;
        margin-top: -15rpx;
    }

    .info-content {
        margin-top: 20rpx;
        font-size: 24rpx;
        text-align: left;
        width: 100%;
    }

    .manage-box {
        margin-top: 20rpx;
        justify-content: flex-end;
    }

    .choose-btn,
    .delet-btn {
        color: #00b6b2;
        border: #00b6b2 solid 1px;
        font-size: 24rpx;
        width: 100rpx;
        height: 50rpx;
        border-radius: 10rpx;
    }

    .delet-btn {
        color: #ff9e5f;
        border: #ff9e5f solid 1px;
        margin-left: 20rpx;
    }
</style>